<template>
  <d2-container class="page">
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="16" :offset="3">
        <el-descriptions class="margin-top" title="租户基本信息" :column="3" border>
          <template slot="extra">
            <el-button type="primary" size="mini" @click="goClientRenew">
              续费
            </el-button>
          </template>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-user"></i>
              租户标识
            </template>
            {{ clientInfo.schema_name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-mobile-phone"></i>
              租户名称
            </template>
            {{ clientInfo.name }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-location-outline"></i>
              当前状态
            </template>
            <el-tag size="mini" v-if="clientInfo.on_trial">正常</el-tag>
            <el-tag size="mini" v-else>禁用</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-tickets"></i>
              当前套餐
            </template>
            <el-tag size="mini">{{ clientInfo.package_manage_name || '无' }}</el-tag>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label">
              <i class="el-icon-office-building"></i>
              生效有效期
            </template>
            {{ clientInfo.start_datetime }} 至 {{ clientInfo.paid_until }}
          </el-descriptions-item>
        </el-descriptions>
      </el-col>
      <el-col :span="16" :offset="3" style="margin-top: 20px;">
        <h4>租户登录地址
          <el-tooltip class="item" effect="dark" placement="top-start">
            <div slot="content">默认超级管理员登录账号：superadmin<br/>默认超级管理员登录密码：admin123456</div>
            <i class="el-icon-question"></i>
          </el-tooltip>
        </h4>
        <br>
        <el-col :span="14" style="padding-left: 0;">
          <el-input placeholder="请输入内容" :value="getBaseURL()" class="input-with-select" disabled>
            <el-button
              slot="append"
              icon="el-icon-document-copy"
              style="width: 120px;background-color: #67c23a;color: #fff;"
              type="primary"
              @click="doCopy">一键复制
            </el-button>
          </el-input>
        </el-col>
        <el-col :span="10">
          <el-button
            icon="el-icon-s-promotion"
            style="background-color: #409EFF;color: #fff;"
            type="primary"
            @click="openWindow()">一键访问
          </el-button>
        </el-col>
      </el-col>
      <el-col :span="16" :offset="3" style="margin-top: 30px;">
        <h4>租户开通记录</h4>
        <br>
        <el-card class="box-card" shadow="hover">
          <el-table
            :data="clientOpeningRecordData"
            max-height="250"
            style="width: 100%">
            <el-table-column
              prop="package_manage__name"
              label="套餐名称">
            </el-table-column>
            <el-table-column
              prop="trial_cut_off_time"
              label="有效天数"
              width="90">
              <template slot-scope="scope">
                <div style="text-align: center">
                  {{scope.row.trial_cut_off_time}}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="trial_cut_off_time_convert"
              label="旧套餐折算天数"
              width="120">
              <template slot-scope="scope">
                <div style="text-align: center">
                  {{scope.row.trial_cut_off_time_convert}}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="money"
              label="付费金额"
              width="90">
              <template slot-scope="scope">
                <div style="text-align: center">
                  {{scope.row.money}}
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="payment_status"
              label="支付状态"
              width="90">
              <template slot-scope="scope">
                <el-tag size="mini">{{
                    {
                      0: '无需支付',
                      1: '微信支付',
                      2: '支付宝支付',
                      3: '线下支付'
                    }[scope.row.payment_status]
                  }}
                </el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="status"
              label="支付类型"
              width="90">
              <template slot-scope="scope">
                <el-tag size="mini" v-if="scope.row.status === 0" type="info">取消支付</el-tag>
                <el-tag size="mini" v-else-if="scope.row.status === 1" type="danger">待支付</el-tag>
                <el-tag size="mini" v-else type="success">支付完成</el-tag>
              </template>
            </el-table-column>
            <el-table-column
              prop="create_datetime"
              label="支付时间"
              width="170">
              <template slot-scope="scope">
                {{ formatDateString(scope.row.create_datetime) }}
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="16" :offset="3" style="margin-top: 30px;">
        <h4>租户拥有权限</h4>
        <br>
        <el-card class="box-card" shadow="hover">
          <div v-if="clientInfo.schema_name === 'public'">超级租户拥有全部权限</div>
          <el-tree
            v-else
            class="flow-tree"
            ref="menuTree"
            :data="menuData"
            node-key="id"
            default-expand-all
            show-checkbox
            check-strictly
            :expand-on-click-node="false"
            :default-checked-keys="menuCheckedKeys"
            :check-on-click-node="false"
            empty-text="请先选择套餐功能"
          >
              <span class="custom-tree-node" slot-scope="{ node, data }">
                <div class="yxt-flex-between">
                  <div :style="{width:((4-node.level)*18+100)+'px'}">{{ data.name }}</div>
                  <div>
                    <el-tag style="margin-left: 5px;"
                            v-for="(item,index) in data.menu_permission"
                            :key="index"
                            size="mini">
                      {{ item }}
                    </el-tag>
                  </div>
                </div>
              </span>
          </el-tree>
        </el-card>
      </el-col>
    </el-row>
  </d2-container>
</template>

<script>
import * as api from './api'
import XEUtils from 'xe-utils'

export default {
  name: 'myClientInfo',
  data () {
    return {
      loginUrl: 'http://public.kfm168.com:8080/',
      menuData: [],
      menuCheckedKeys: [],
      data: [],
      packageFeaturesData: [],
      clientInfo: {},
      clientOpeningRecordData: []
    }
  },
  created () {
    this.initMenu()
    this.getClientInfo()
    this.getClientOpeningRecordData()
  },
  methods: {
    initMenu () {
      api.getAllMenu().then(ret => {
        const data = ret.data.data || ret.data
        this.menuData = XEUtils.toArrayTree(JSON.parse(JSON.stringify(data)).map(val => {
          val.disabled = true
          return val
        }), { parentKey: 'parent', strict: false })
        console.log('menuData', this.menuData)
      })
    },
    // 获取当前用户租户信息
    getClientInfo () {
      api.getClientInfo().then(ret => {
        this.clientInfo = ret.data
        if (this.clientInfo.schema_name !== 'public') {
          this.getClientAuthMenu(ret.data.client_id)
        }
      })
    },
    // 初始化权限
    getClientAuthMenu (clientId) {
      const query = {}
      query.client_id = clientId
      api.getClientAuthMenu(query).then(res => {
        this.$refs.menuTree.setCheckedKeys(res.data.data)
      })
    },
    getBaseURL () {
      return `${location.protocol}//${this.clientInfo.domain}${location.port ? ':' : ''}${location.port}/`
    },
    // 一键复制
    doCopy () {
      this.$copyText(this.getBaseURL()).then(() => {
        this.$message.success('已复制')
      })
    },
    // 一键跳转
    openWindow () {
      window.open(this.getBaseURL())
    },
    // 续费跳转
    goClientRenew () {
      const routeUrl = this.$router.resolve({
        path: '/clientRenew'
      })
      window.open(routeUrl.href, '_blank')
    },
    // 获取开通记录
    getClientOpeningRecordData () {
      api.getClientOpeningRecordData().then(res => {
        this.clientOpeningRecordData = res.data
      })
    },
    // 日期格式转换
    formatDateString (dateString) {
      var date = new Date(dateString)
      return date.getFullYear() + '-' +
        ('0' + (date.getMonth() + 1)).slice(-2) + '-' +
        ('0' + date.getDate()).slice(-2) + ' ' +
        ('0' + date.getHours()).slice(-2) + ':' +
        ('0' + date.getMinutes()).slice(-2) + ':' +
        ('0' + date.getSeconds()).slice(-2)
    }
  }
}
</script>
